<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/7/12
  Time: 11:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath() + "/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>用户列表</title>
    <link href="bootstrap/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <%--    <link href="bootstrap/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">--%>
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
    <link href="bootstrap/css/font-awesome.css" rel="stylesheet">
    <script src="bootstrap/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <link href="bootstrap/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script type="text/javascript" src="bootstrap/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="bootstrap/js/plugins/layer/layer.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/ry.js"></script>
</head>
<style>
    /*div{*/
    /*    border: 1px solid black;*/
    /*}*/
</style>
<body style="background-color: #f3f3f4">
<div class="container" style="width: 100%;">
    <div class="row" style="height:100%;">
        <div class="col-md-12">
            <div class="row"
                 style="background-color: #ffffff;box-shadow: 1px 1px 3px rgba(0,0,0,.2);margin: 10px 10px;padding:10px 10px;border-radius: 10px;line-height: 50px;">
                <form class="form-inline">
                    <div class="form-group">
                        <label>角色编号</label>
                        <input type="text" class="form-control" name="roleCode" id="roleCode" placeholder="">
                    </div>
                    <div class="form-group">
                        <label>角色名称</label>
                        <input type="text" class="form-control" name="roleName" id="roleName" placeholder="">
                    </div>
                    <div class="form-group">
                        <label>状态</label>
                        <select class="form-control" name="status" id="status">
                            <option value="-1">--全部--</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary query">
                        <i class="fa fa-search"></i> 搜索
                    </button>
                    <button type="reset" class="btn btn-warning">
                        <i class="fa fa-refresh"></i>
                        重置
                    </button>
                </form>
            </div>
            <div class="row"
                 style="background-color: #ffffff;box-shadow: 1px 1px 3px rgba(0,0,0,.2);margin: 10px 10px;padding:10px 10px;border-radius: 10px;">
                <div id="toolbar">
                    <button class="btn btn-primary" id="add">
                        <i class="fa fa-plus" aria-hidden="true">&nbsp;</i>新增
                    </button>
                    <button id="edit" class="btn btn-success">
                        <i class="fa fa-pencil fa-fw"> &nbsp;</i>编辑
                    </button>
                    <button id="remove" class="btn btn-danger">
                        <i class="fa fa-trash-o fa-fw"> &nbsp;</i>删除
                    </button>
                </div>
                <table id="userData"></table>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var ztreeObject;
    var setting = {};
    var treeNodes = [{
        name: '部门1', open: true, children: [{
            name: '部门1-1'
        }, {
            name: '部门1-2'
        }]
    },
        {
            name: '部门2', open: true, children: [{
                name: '部门2-1'
            }, {
                name: '部门2-2'
            }]
        }
    ];

    function edit(id) {
        $.modal.openFull("编辑角色信息", "view/role/edit?id=" + id);
    }

    function deleteUser(id){
        layer.confirm('确认删除吗？', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                url:'role/delete?roleId='+id,
                type:'get',
                dataType:'json',
                success:function(ret){
                    if(ret.code==200){
                        layer.msg(ret.msg,function(){
                            _table.bootstrapTable("refresh");
                        })
                    }else{
                        layer.msg(ret.msg);
                    }
                }

            });
        });

    }
    // 设置全限

    function setPermission(roleId){
        $.modal.open('设置角色权限',"view/role/permssion?roleId="+roleId,"400px","300px");
    }
    $(function () {
        $("#remove").click(function(){
            // 所有多选选中的行
            let $rows = _table.bootstrapTable("getSelections");
            if($rows.length==0){
                layer.msg('请选择需要删除的数据');
                return;
            }
            // 将js数组封装为集合或数组
            let array = new Array();
            for(let i=0;i<$rows.length;i++){
                array.push($rows[i].roleId);
            }
            $.modal.deletes('role/deletes',{ids:array});
        });


        $("#add").click(function () {
            $.modal.openFull("新增用户信息", "view/role/edit");
        })

        ztreeObject = $.fn.zTree.init($(".ztree"), setting, treeNodes);
        $(".query").click(function () {
            _table.bootstrapTable('refresh')
        });

        // 初始化表格
        function initTable() {
            let columns=[{
                checkbox:true
            },{
                field: 'roleId',
                sortable: true,
                title: '角色ID'
            }, {
                field: 'roleCode',
                sortable: true,
                title: '角色编号'
            }, {
                field: 'roleName',
                sortable: true,
                title: '角色名称'
            },  {
                field: 'status',
                sortable: true,
                title: '状态',
                formatter:function(value,row,index){
                    if(value==1){
                        return "启用";
                    }else{
                        return "禁用";
                    }

                }
            },
                {
                    title: '操作',
                    width: '150px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        // 当前行的数据
                        // 当前循环的次数
                        return '<a href="javascript:void(0)" title="权限设置" onclick="setPermission('+row.roleId+');"><i class="fa fa-cogs"></i></a>&nbsp;&nbsp;<a href="javascript:void(0)" onclick="edit(' + row.roleId + ')" class="edit" title="编辑用户"><i class="fa fa-pencil"></i></a>&nbsp;&nbsp;<a href="javascript:void(0)" onclick="deleteUser('+row.roleId+')" title="删除用户"><i class="fa fa-trash-o"></i></a>';
                    }
                }];
            $.modal.initTable($("#userData"),columns,'role/data');
        }

        initTable();

    })

</script>
</html>
